<template>
  <div class="formdata">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div class="item-box item-box-info">
        <div class="title">基本信息</div>
        <el-form-item label="银行卡号" prop="bankAccount">
          <el-input style="width: 30%" v-model="form.bankAccount" placeholder="请输入银行卡号" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input style="width: 30%" v-model="form.realName" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardNo">
          <el-input style="width: 30%" v-model="form.idCardNo" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input style="width: 30%" v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="银行支行" prop="bankBranch">
          <el-input style="width: 30%" v-model="form.bankBranch" placeholder="请输入银行支行" />
        </el-form-item>
        <el-form-item label="开户行地址" prop="addressIdArr">
          <el-cascader ref="cascaderMallCatergory" :class="addressArr != '请选择省市区' ? 'inputBox':''" :placeholder="addressArr" :props="position" v-model="form.addressIdArr" @change="postionChange" style="width:30%" />
        </el-form-item>
        <el-form-item label="银行卡类型" prop="cardType">
          <el-radio v-model="form.cardType" :label="1" @input="radioInput">个人</el-radio>
          <el-radio v-model="form.cardType" :label="2" @input="radioInput">对公</el-radio>
        </el-form-item>
        <template v-if="form.cardType == 2">
          <el-form-item label="开户证明" ref="publicAccountImgUrl" prop="publicAccountImgUrl">
            <image-drap-upload v-model="form.publicAccountImgUrl" :limit="1" />
          </el-form-item>
          <el-form-item label="工商营业执照" ref="registrationImgUrl" prop="registrationImgUrl" >
            <image-drap-upload v-model="form.registrationImgUrl" :limit="1" />
          </el-form-item>
        </template>
      </div>
    </el-form>
    <div slot="footer" style="margin-left: 80px" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addressPid, bankSave, bankDetail } from "@/api/asset/asset";
import { isIdCard, isMobile } from "@/utils/validate";
import imageDrapUpload from '@/components/Upload';
export default {
  name: "bankcardAdd",
  components: {
    imageDrapUpload
  },
  data() {
    return {
      id: "",
      productCateList: [],
      productBrand: [],
      productDetail: "",
      buyerRead: "",
      addressArr: '请选择省市区',
      form: {
        bankAccount: "", //银行卡号
        realName: "", //真实姓名
        idCardNo: "", //身份证号
        mobile: "", //手机号
        bankBranch: "", //银行支行
        addressIdArr: [], //省市区id集合 前端页面展示需要
        bankBranchProvince: "", //开户行省Id
        bankBranchCity: "", //开户行市
        bankBranchArea: "", //开户行区
        defaultFlag: false, //默认银行卡
        cardType: "", //银行卡类型 1 对私 2 对公
        publicAccountImgUrl: [], //对公账号开户证明（对公需要不必填）
        registrationImgUrl: [], //工商营业执照图片地址（对公需要不必填）
      },
      loading: false,
      // 表单校验
      rules: {
        bankAccount: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "change" },
        ],
        idCardNo: [
          { required: true, message: "请输入身份证号", trigger: "change" },
          { pattern: isIdCard(), message: "请输入正确的身份证号", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { pattern: isMobile(), message: "请输入正确的手机号码", trigger: "blur" },
        ],
        bankBranch: [
          { required: true, message: "请输入银行支行", trigger: "change" },
        ],
        addressIdArr: [
          { required: true, message: "请选择开户行地址", trigger: "blur" },
        ],
        cardType: [
          { required: true, message: "请选择银行卡类型", trigger: "blur" },
        ],
        publicAccountImgUrl: [
          { required: true, message: "请上传对公账号开户证明", trigger: "blur" },
        ],
        registrationImgUrl: [
          { required: true, message: "请上传工商营业执照", trigger: "blur" },
        ],
      },
      positionAll: null,
      position:{
        lazy: true,
        lazyLoad (node, resolve) {
          const { level } = node;
          let nodes = [];
          // 接口获取的是省-市-区数据、分别是省、市、区数据
          addressPid({parentCode : node.value}).then(res => {
            if(res.code == 200){
              res.data.forEach(item => {
                //接口返回的省市区数据如下结构：
                if(item.name != '请选择'){
                  let obj = {
                    value: item.code,
                    label: item.name,
                    leaf : level >= 2 //省-市-区数据标识，level=0为省、level=1为市、level=2为区
                  }
                  nodes.push(obj)
                }
              })
              resolve(nodes);
            }
          })
        }
      },
    };
  },
  created() {
    const obj = Object.assign({}, this.$route, {
      title: this.$route.query.id ? "修改银行卡" : "新增银行卡",
    });
    console.log(obj);
    this.$tab.updatePage(obj);
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getDetail();
    }
    this.count = this.$route.query.count;
  },
  methods: {
    //更改银行卡类型
    radioInput() {
      this.form.publicAccountImgUrl = [];
      this.form.registrationImgUrl = [];
    },
    handleCancel() {
      this.$tab.closePage();
    },
    // 地区下拉--获取省市区文字
    postionChange(){
      let arr = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].path; //如果不这样获取，就会获取到对应的省市区ID
      this.form.bankBranchProvince = arr[0]
      this.form.bankBranchCity = arr[1]
      this.form.bankBranchArea = arr[2]
    },
    // 查询省市区
    getAddress(id, callback) {
      addressPid({ parentCode: id }).then((res) => {
        if (res.code === 200) {
          callback(res) && callback;
        }
      });
    },
    //获取详情
    getDetail() {
      let loading = this.$loading({
        lock: true,
        text: '正在加载银行卡信息...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      bankDetail(this.id).then((res) => {
        loading.close();
        res.data.addressIdArr = [
          res.data.bankBranchProvinceName,
          res.data.bankBranchCityName,
          res.data.bankBranchAreaName,
        ];
        if(res.data.bankBranchProvinceName && res.data.bankBranchCityName && res.data.bankBranchAreaName){
          this.addressArr = res.data.bankBranchProvinceName+'/'+res.data.bankBranchCityName+'/'+res.data.bankBranchAreaName
        }
        res.data.publicAccountImgUrl = [{url: res.data.publicAccountImgUrl}]
        res.data.registrationImgUrl = [{url: res.data.registrationImgUrl}]
        this.form = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$emit("reset");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.count === 0) {
            this.form.defaultFlag = true;
          }
          let param = JSON.parse(JSON.stringify(this.form))
          // 对公账号开户证明（对公需要不必填）
          if(param.publicAccountImgUrl.length == 1){
            param.publicAccountImgUrl = param.publicAccountImgUrl[0].url
          }else{
            param.publicAccountImgUrl = ''
          }
          // 工商营业执照图片地址（对公需要不必填）
          if(param.registrationImgUrl.length == 1){
            param.registrationImgUrl = param.registrationImgUrl[0].url
          }else{
            param.registrationImgUrl = ''
          }
          bankSave(param).then((res) => {
            if(res.code === 200){
              this.$modal.msgSuccess("操作成功");
              const obj = this.$route;
              this.$tab.closeOpenPage(obj);
              this.$router.back();
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.formdata {
  padding: 24px;
  box-sizing: border-box;
  .item-box {
    padding-bottom: 30px;
  }
  .title {
    font-weight: bold;
    border-left: 4px solid #409eff;
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    padding-left: 10px;
    margin-bottom: 20px;
    text-align: left;
  }
}
.item-box-info ::v-deep .avatar-uploader .el-upload,
.upload-spec ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.item-box-info .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
.spec__list {
  .list_item {
    display: flex;
    flex-direction: column;
    padding: 25px;

    ::v-deep {
      .el-input {
        width: 150px;
        margin-top: 10px;
        margin-right: 10px;
      }

      .el-button {
        margin-top: 10px;
      }
    }

    .spec__name {
      display: flex;
      align-items: center;

      > span {
        padding-right: 10px;
        font-size: 13px;
        color: #333;
        margin-top: 10px;
      }
    }

    .spec__value {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 15px;

      > span {
        padding-right: 10px;
        font-size: 13px;
        color: #333;
        margin-top: 10px;
      }

      .spec__value_item {
        position: relative;

        .close__btn {
          position: absolute;
          top: 0;
          right: 0;
          height: max-content;
          cursor: pointer;
          margin-top: -6px;
          margin-right: 3px;
          border-radius: 100%;
          i {
            background-color: #ffffff;
          }
        }
      }
    }

    .btn_del__text {
      font-size: 13px;
      color: #e60012;
      cursor: pointer;
      user-select: none;
      margin-top: 10px;
    }
  }
}
.border__box {
  background: #ffffff;
  border: 1px solid #d8dce6;
  border-radius: 2px;

  .add_btn {
    padding: 20px;
    margin: 10px;
    background: #f5f7fa;
    border-radius: 2px;
  }
}
::v-deep .el-form-item {
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-input-group--append {
    vertical-align: middle;
  }
}
::v-deep {
  table th.must div:before {
    padding-right: 3px;
    color: #f5222d;
    content: "*";
  }
}
::v-deep .inputBox .el-input__inner::placeholder{
  color:#606266 !important;
}
</style>
